﻿@using XiangDongClub.Model
@model ZT_Shop
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html">
    <title>享动运动季</title>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/layer/mobile/need/layer.css" rel="stylesheet" />
    <link href="~/Content/current-area.css?v=1" rel="stylesheet" />
</head>
<body>
    <input type="hidden" id="signPhone" value="@ViewBag.SignPhone" />
    <div class="tiyanquan">
        <img class="tiyan-back" src="../image/current/tiyan-bakground.png" alt="" />
        <div class="logo">
            <img src="http://fuwu.xdjsclub.com/Shops/images/@(Model.ImgLogo)/logo.jpg" alt="" />
        </div>
        <div class="tiyan-name">
            <p class="club-name">@(Model.ShopName)（@Model.CityName）</p>
            <p class="club-address">
                <img src="../image/current/place.png" alt="" />
                <span>@Model.UseShop</span>
            </p>
        </div>
        <div class="tiyan-type">
            @(Model.TicketName)
        </div>
    </div>
    <div class="container">
        <div class="slide-frame">
            邀请30名好友为你加油即可获得
            <span>@Model.ShopName</span>
            @(Model.TicketName)一张！
        </div>
    </div>
    <div class="cheer">
        <img class="cheer-title" src="../image/current/paibian.png" alt="" />
        <img class="man" src="../image/current/man.png" alt="" />
        <div class="count">
            <img class="kedu" src="../image/current/temperature-up.png" alt="" />
            <div class="count-icon">

            </div>
        </div>
    </div>
    <p class="count-text">
        已有<span class="count-number">@ViewBag.HelpCount</span>人为你打气加油
    </p>
    <div class="foot-btn">
        <img class="btnshare" src="../image/current/foot-btn.png" alt="立即抢券" />
    </div>

    <div class="share-frame">
        <div class="share">
            <div class="container">
                <p>分享至</p>
                <div class="share-menu">
                    <div class="menuList">
                        <div class="list wechat" onclick="codeFrame()">
                            <img src="../image/share/WeChat.png" alt="微信" />
                            微信
                        </div>
                        <div class="list friends" onclick="codeFrame()">
                            <img src="../image/share/moments.png" alt="朋友圈" />
                            朋友圈
                        </div>
                        <div class="list refresh" onclick="reload()">
                            <img src="../image/share/WeChat1.png" alt="刷新" />
                            刷新
                        </div>
                    </div>
                </div>
            </div>
            <div class="cancel" onclick="cancel()">
                取消
            </div>
            <input type="text" style="position: absolute;bottom: 0;z-index: -1" readonly  />
        </div>
    </div>

    <div class="code-frame">
        <div class="code-content">
            <div class="title1">
                <img src="../image/current/code_1.png" alt="" />
            </div>
            <div class="code-top">
                <div class="vrcode" id="vrcode">
                    @*<img src="../image/current/vrcode.png" alt="" />*@
                </div>
                <div class="code-text">
                    <p>手机截屏保存二维码图片</p>
                    <p>打开微信发送给好友或分享朋友圈邀请好友为你加油！</p>
                </div>
            </div>
            <div class="title2">
                <img src="../image/current/code_2.png" alt="" />
            </div>
            <div class="code-bottom">
                <div class="code-bottom-text">
                    <p>复制下列链接</p>
                    <p>打开微信发送给朋友或分享朋友圈 邀请好友为你加油!</p>
                    <p id="shareUrl"></p>
                </div>
            </div>
        </div>
        <div class="btnimg">
            <img onclick="href();" src="../image/current/copybtn.png" alt="" />
        </div>
    </div>

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/layer/layer.js"></script>
    <script src="~/Scripts/Framework/JsOPP.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

    <script>
        var phone = sessionStorage.getItem("userPhone");
        var shareUrl = "http://hd.xdjsclub.cn/Home/CurrentShare?p=" + encodeURIComponent("@ViewBag.SignPhone");
        var qrcode = new QRCode(document.getElementById("vrcode"), {
            width: 100,
            height: 100
        });
        makeCode();

        function makeCode() {
            qrcode.makeCode(shareUrl);
        }
        console.log(encodeURIComponent("@ViewBag.SignPhone"));
        $(function () {
            $("#shareUrl").text("链接："+shareUrl);
            count();
            shareFrame();
        });

    //    柱状图随人数增加而增加
    function count() {
        var val = $(".count-number").text();
        var icon = $(".count-icon");
        icon.height(val * 5.5);
        if (val <15) {
            $(".cheer .man").attr("src", "../image/current/man.png");
        } else if (val >=15 && val < 30) {
            $(".cheer .man").attr("src", "../image/current/man1.png");
        } else if (val >= 30) {
            icon.css({
                "max-height": "160px",
                "border-top-left-radius": "5px",
                "border-top-right-radius": "5px"
            });
            $(".cheer .man").attr("src", "../image/current/man3.png");
          	 $(".slide-frame").css({
                "background": "url('../image/current/slide-background2.png') no-repeat",
                "background-size":"100% 100%",
                "min-height": "7.7rem"
            }).text(" ");
			$(".foot-btn").html("<img onclick='RecTicket()' src='../image/current/woyao.png' alt='立即抢券'/>");
        }
    }
    //    弹出分享层
    var ModalHelper = (function (bodyCls) {
        var scrollTop;
        return {
            afterOpen: function () {
                scrollTop = document.scrollingElement.scrollTop;
                document.body.classList.add(bodyCls);
                document.body.style.top = -scrollTop + 'px';
            },
            beforeClose: function () {
                document.body.classList.remove(bodyCls);
                // scrollTop lost after set position:fixed, restore it back.
                document.scrollingElement.scrollTop = scrollTop;
            }
        };
    })('modal-open');

	 var isRec = 0;
    function RecTicket() {
        if (isRec == 1)
            return layer.msg("请勿重复领取！");
        $.post("/Home/RecCurrentTicket", { 'phone': phone }, GetRecTicketResponse);
    }
    function GetRecTicketResponse(data) {
        if (data.Success)
            isRec = 1;
        if (data.Code == 1)
            isRec = 1;
        layer.msg(data.Message);
    }
//    弹出分享层
    function shareFrame() {
        $(".btnshare").on("click", function () {
            $(".share-frame").animate({"bottom": "0"});
            ModalHelper.afterOpen();
        });
        $(".share-frame").click(function () {
            cancel();
        });
        $(".share").click(function () {
            return false;
        });
    }
//    刷新页面
    function reload(){
        location.reload();
    }
//    复制链接
    function href(){
        $(".share-frame input").val(shareUrl);
        console.log(href);
        var val = $(".share-frame input").val();
        $(".share-frame input").select();
        document.execCommand("Copy");
        layer.msg("分享链接复制成功，快去邀请好友为你加油吧！")
        $(".code-frame").hide();
    }
        //    取消
        function cancel() {
            $(".share-frame").animate({ "bottom": "-100%" });
            ModalHelper.beforeClose();
        }

        //二维码分享页面
        function codeFrame() {
            $(".code-frame").show();
            $(".share-frame").css({ "bottom": "-100%" });
            ModalHelper.afterOpen();
        }

    </script>
</body>
</html>